<!DOCTYPE html>
<html>
<head>
	<title>1</title>
	<meta charset="utf-8"/>
	<style type="text/css">
		div{
			width: 500px;
			padding: 10px 10px;
			border: 2px solid #000;
		}
		img{
			float: left;
		}
		.pre:after{
			content: "";
			height: 0;
			display: block;
			clear: both;
		}
		/*.pra:after{
			content: "";
			height: 0;
			display: block;
			clear: both;
		}*/
		p{
			/*width: 550px;*/
			border: 2px solid #000;

		}
		.pra{
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div class="pre">
		<img src="1.jpg"/>
		<!-- 这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字这里是一些文字 -->
		<!-- 在没有下面的div标签的情况下若没有这些文字会高度塌陷，文字的优先级非常高 -->
<!-- 		<div></div>
		 加上了这个div标签仍然塌陷 -->
		<!-- <div style="clear: left;"></div> -->
		<!-- 此时清楚了浮动影响，不会塌陷 --> 
		
	</div>
	<br/>
	<div class="pra">
		<img src="1.jpg"/>
		<br/>
		<p>这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花这是一朵花</p>
	</div>
</body>
</html>